<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <el-form label-width="200px">
        <div class="tit">
          <h2>基础信息</h2>
          <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
        <el-row>
          <el-form-item label="呼叫器名称:">
            <span>{{dataInfo.beeperName}}</span>
          </el-form-item>
          <el-form-item label="呼叫器编号:">
            <span>{{dataInfo.beeperCode}}</span>
          </el-form-item>
          <el-form-item label="状态:">
            <span>{{formatState(dataInfo.state)}}</span>
          </el-form-item>
          <el-form-item label="呼叫器状态:">
            <span>{{formatBeeperState(dataInfo.beeperState) }}</span>
          </el-form-item>
          <el-form-item label="wifi账号:">
            <span>{{dataInfo.wifiName}}</span>
          </el-form-item>
          <el-form-item label="wifi密码:">
            <span>{{dataInfo.wifiPwd}}</span>
          </el-form-item>
          <el-form-item label="联系人:">
            <span>{{beeperHouse.linkName}}</span>
          </el-form-item>
          <el-form-item label="联系电话:">
            <span>{{beeperHouse.linkPhone}}</span>
          </el-form-item>
          <el-form-item label="联系地址:">
            <span>{{linkAddress}}</span>
          </el-form-item>
          <el-form-item label="备注:">
            <span>{{dataInfo.remark}}</span>
          </el-form-item>
          <el-form-item label="创建人:">
            <span>{{ dataInfo.createUserName}}</span>
          </el-form-item>
          <el-form-item label="创建时间:">
            <span>{{ dataInfo.createDate }}</span>
          </el-form-item>
          <el-form-item label="修改人:">
            <span>{{ dataInfo.modifyUserName}}</span>
          </el-form-item>
          <el-form-item label="修改时间:">
            <span>{{ dataInfo.modifyDate }}</span>
          </el-form-item>
        </el-row>
      </el-form>
      
     

      <div class="tit">
        <h2>服务信息列表</h2>
      </div>
      <el-table 
        :data="tableData" 
        border 
        style="width:max-content" h
        ighlight-current-row
        :header-row-style="{'background-color':'#f2f2f2'}">
        <el-table-column  label="序号" width="140px" align="center" type="index">

        </el-table-column>
        <el-table-column prop="beeperBtnId" label="服务ID" width="140px" align="center">

        </el-table-column>
        <el-table-column prop="btnCode" label="服务编号" width="140px"  align="center">

        </el-table-column>
        <el-table-column prop="serverName" label="服务" width="140px" align="center" >

        </el-table-column>
        <el-table-column prop="businessName" label="商户" width="140px" align="center" >

        </el-table-column>
      </el-table>

    </div>
  </div>
</template>

<script>
import EquipApi from '@/api/equip/equip';
export default {
  data() {
    return {
      dataInfo: {},
      tableData:[],
      beeperHouse:{},
    };
  },
  computed:{
    // 把省市区和详细地址合并起来为联系地址
    linkAddress(){
      return this.beeperHouse.provinceName+this.beeperHouse.cityName+this.beeperHouse.areaName+this.beeperHouse.address
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      EquipApi.getEquipBeeperInfo({id:this.$route.query.id}).then(res=>{
        this.dataInfo = res.data
        this.beeperHouse = res.data.beeperHouse
        this.tableData = res.data.equipBeeperBtnList
      })
    },
    formatState (cellValue) {
        if (cellValue == -1) {
            return '删除'
        } else if (cellValue == 0) {
            return '禁用'
        } else if (cellValue == 1) {
            return '启用'
        }
    },
    formatBeeperState(cellValue){
        if (cellValue == 1) {
            return '待连接'
        } else if (cellValue == 2) {
            return '在线'
        } else if (cellValue == 3) {
            return '离线'
        }
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path:'/equip/beeperManagement'})
    }
    
  },
};
</script>
<style lang="scss" src="@/assets/css/views/add.scss" scope></style>
